:root{
    --salesforce-blue: 	#00A1E0
}
@import 'typed';

@font-face {
    font-family: "Winky Sans";
    src:url("fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

body {
    font-family: "Winky Sans";
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(black 3%, navy 55%, var(--salesforce-blue), navy);
    margin: 0;
    cursor: default;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex: 1;
}

.footer {
    height: 5vh;
    margin: 10px;
    align-items: end;
    flex: 1;
}

.horizontal{
    display: flex;
    flex-direction: row;
}

.subcontainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.left {
    color: white;
}

.right {
    color: navy;
    background-color: white;
}

.title{
    font-size: 40pt;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-transform: uppercase;
    padding: 10% 2% 20% 2%;
    flex: 3;
    margin-top: 15%;
}

.name {
    font-weight: 800;
}

.position {
    font-size: 20pt;
    font-weight: 300;
}

.container > div {
    text-align: center;
}

.white-bar{
    display: flex;
    justify-content: space-evenly;
    padding: 1.5% 0;
    flex: 1;
    align-items: center;
    flex-wrap: wrap;
}

img {
    max-height: 140px;
    padding: 5px;
}

.single-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logo {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.header {
    text-align: center;
    font-weight: bold;
}

.details {
    display: flex;
    flex-direction: column;
    padding: 10px;
    text-align: left;
}

.description {
    padding-bottom: 10px;
}

a {
    color: white;
    text-decoration: unset;
}

a:hover {
    text-shadow: white 1px 0 10px;
    font-weight: 300;
}

.typewrite {
    cursor: default;
    text-shadow: white 1px 0 10px;
}

@media only screen and (max-width: 600px) {
    .logo {
        flex-direction: column;
    }
}

@media only screen and (max-width: 800px) {
    .container {
        flex-direction: column;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }
    .subcontainer{
        min-height: 100vh;
        scroll-snap-align: start;
    }
    img {
        max-width: 100px;
    }
    .title {
        font-size: 3vh;
        padding: 5px;
        margin-top: 30vh;
    }
    .position {
        font-size: 2vh;
    }
    .single-entry {
        flex-direction: column;
    }
}

@media only screen and (max-width: 1250px) {
    .right {
        flex-direction: column;
    }
    .single-entry {
        flex-direction: column;
        align-items: center;
    }
    .logo {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    img {
        padding: 10px;
    }
}