@font-face{
  font-family: vr;
  src: url(./assets/Orbitron-Regular.ttf);
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
}

table{
    background-image: linear-gradient(to bottom,rgb(255,255,255),rgb(210, 210, 210));
    border-radius: 20px;
    outline-style: solid;
    outline-width: 3px;
    padding: 10px; 
    flex-direction: column;
    box-shadow: 4px 6px 11px;
}

tr:nth-child(1){
    font-size: medium;
}

tr{
    font-size: small;
    font-family: vr;
}

h2{
    font-family: vr;
}

a{
    text-decoration: none;
    color: rgb(97, 120, 223);
}

a:hover{
    text-decoration: underline;
}

video{
    border-radius: 40px;
    outline-style: solid;
    outline-width: 3px;
    outline-color: transparent;
    transition: outline-color 200ms ease-out, opacity 200ms ease-out, box-shadow 200ms ease-out;
    max-width: 40%;
    height: 40%;
}

video:hover{
    outline-color: black;
    box-shadow: 4px 6px 15px;
}

img{
    border-radius: 40px;
    outline-style: solid;
    outline-width: 3px;
    outline-color: transparent;
    transition: outline-color 200ms ease-out, opacity 200ms ease-out, box-shadow 200ms ease-out;
    max-width: 40%;
    height: 40%;
}

img:hover{
    outline-color: black;
    box-shadow: 4px 6px 15px;
}

h3{
    font-family: vr;
}

.linksClass{
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-self: center;
    color: black;
    background-color: transparent;
    font-size: larger;
    border-style: none;
    font-family: vr;
    cursor: pointer;
    transition: font-size 400ms ease-out, text-shadow 400ms ease-out;
}

.linksClass:hover{
    text-shadow: 2px 4px 10px; 
    font-size: x-large;
}

.highlight{
    text-shadow: 1px 2px 7px; 
    color: rgb(97, 120, 223);
    font-family: vr;
    transition: color 100ms ease-out, font-size 400ms ease-out, text-shadow 400ms ease-out;
}

.highlight:hover{
    color: rgb(129, 150, 247);
}

.primaryDiv{
    background-image: linear-gradient(to bottom,rgb(255,255,255),rgb(210, 210, 210));
    border-radius: 20px;
    outline-style: solid;
    outline-width: 3px;
    padding: 10px; 
    flex-direction: column;
    box-shadow: 4px 6px 11px;
    z-index: 0;
    opacity: 0;
    position: relative;
    transform: translateY(50px);
    animation: floatUp 1s forwards;
    animation-delay: 200ms;
}

.dropdownBox{
    position: absolute;

    background-image: linear-gradient(to bottom,rgb(255,255,255),rgb(210, 210, 210));
    border-radius: 20px;
    outline-style: solid;
    outline-width: 3px;
    flex-direction: column;
    box-shadow: 4px 6px 11px;
    min-width: 160px;
    padding-right: 15px;
    padding-left: 7px;
    display: none;
    transform: translateX(0px) translateY(10px);
    opacity: 0;
}

.dropdownLink{
    display: block;
    text-decoration: none;
    color: black;
    background-color: transparent;
    font-size: large;
    border-style: none;
    font-family: vr;
    cursor: pointer;
    padding: 5px;
    transition: font-size 400ms ease-out, text-shadow 400ms ease-out;
}

.dropdownLink:hover{
    text-shadow: 2px 4px 10px; 
    font-size: larger;
}

#topDiv{
    display: block;
    text-align: center;
    color: black;
    font-family: vr;
}

#linksDiv{
    display: flex;
    background-image: linear-gradient(to bottom,rgb(255,255,255),rgb(210, 210, 210));
    border-radius: 20px;
    height: 70px;
    justify-content: space-evenly;
    align-items: center;
    outline-style: solid;
    outline-width: 3px;
    box-shadow: 4px 6px 11px;
    font-family: vr;
    z-index: 1;
    position: relative;

    opacity: 0;
    transform: translateY(50px);
    animation: floatUp 1s forwards;
}

@keyframes floatUp{
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes dropdownIn{
        to{
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes dropdownOut{
    to{
        transform: translateX(10px);
        opacity: 0;
    }
}