@font-face {
    font-family: Jersey;
    src: url('/webApps/raytracer/fonts/jersey10.woff2') format('woff2'),
         url('/webApps/raytracer/fonts/jersey10.woff') format('woff'),
         url('/webApps/raytracer/fonts/jersey10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    overflow-x: hidden;
    user-select: none;
    background: linear-gradient(180deg, #74add1, #FFFFFF);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

canvas {
    width: 80%;
    margin: auto;
    display: block;
    border-radius: 20px;
    border: 15px solid black;
}

#renderButton {
    transition-duration: 0.5s;

    display: flex;
    width: 20%;
    height: 10vw;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;

    border-radius: 20px;
    background-color: rgba(0, 162, 255, 1);
    box-shadow: 0 12px rgba(0, 162, 255, 0.462);

    text-align: center;
    font-family: Jersey;
    font-size: 5vw;
}

#renderButton p {
    width: 100%;
    margin: auto;
}

#renderButton:hover {
    cursor: pointer;
    background-color: rgb(111, 187, 232);
    box-shadow: 0 12px rgba(0, 162, 255, 1), 0 17px 50px 0 rgb(111, 187, 232);
}

#renderButton:active {
    color: white;
    transform: translate(0, 12px);
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0px rgba(0, 162, 255, 1), 0 17px 50px 0 rgb(111, 187, 232);
}

#cameraSettings {
    display: block;
    width: 80%;
    height: 25vw;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-top: 1vw;

    background-color: rgb(111, 187, 232);
    box-shadow: 10px 12px rgba(0, 162, 255, 0.462);
    border-radius: 20px;

    text-align: center;
}

.settingsText {
    margin: auto;
    margin-top: 1vw;
    margin-bottom: 1vw;

    width: 60%;
    height: 1vw;

    font-family: Jersey;
    font-size: 2vw;
}

.slider {
    transition: 0.5s;
    cursor: pointer;

    margin: auto;
    margin-top: 1vw;
    width: 60%;
    height: 15px;

    appearance: none;
    border-radius: 20px;
    opacity: 0.7;
    background-color: gray;
    box-shadow: 0 1px rgb(86, 86, 86);
    outline: none;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    background-color: rgb(0, 162, 255);
    border-radius: 20px;
    width: 25px;
    height: 25px;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background-color: rgb(0, 162, 255);
    border-radius: 20px;
}

.slider:hover {
    opacity: 1;
}

.textBoxRow {
    display: flex;
    justify-content: center;
    width: 100%;
}

.camPosTextBox {
    transition-duration: 0.5s;

    margin-top: 0.7vw;
    margin-right: 3vw;
    margin-left: 3vw;
    width: 3.5vw;
    height: 2vw;

    text-align: center;
    font-family: Jersey;
    font-size: 2vw;

    opacity: 0.5;
    border: 3px solid black;
    border-radius: 3px;
    background-color: rgba(0, 162, 255, 0.462);
}

.camPosTextBox:hover {
    opacity: 1;
}

.camPosTextBox::placeholder {
    color: white;
}

#objectsGrid {
    display: grid; 
    justify-content: center;
    grid-template-columns: auto auto auto;
    margin: 1vw;
}

.object {
    margin: 20px;
    padding-top: 1vw;

    text-align: center;
    border-radius: 20px;
    background-color: rgb(111, 187, 232);
    box-shadow: 1vw 1vw rgba(0, 162, 255, 0.462);
}

.rmButton {
    transition-duration: 0.5s;
    display: flex;
    justify-content: center;

    margin: auto;
    margin-top: 3vw;
    height: 5vw;
    width: 20%;

    color: white;
    font-family: Jersey;
    font-size: 1.6vw;
    border-radius: 1vw;
    background-color: rgb(211, 54, 54);
    box-shadow: 0vw 0.5vw rgba(255, 255, 255, 0.462);
}

.rmButton:hover {
    background-color: rgb(0, 0, 0);
    box-shadow: 0vw 0.5vw rgba(255, 0, 0, 0.7);
}

.rmButton:active {
    background-color: rgb(0, 0, 0);
    box-shadow: 0vw 0vw rgba(255, 0, 0, 0.7);
    transform: translate(0vw, 0.5vw);
}

.createButton {
    transition-duration: 0.5s;
    background-color: rgba(0, 162, 255, 1);
    box-shadow: 0 0.7vw rgba(0, 162, 255, 0.462);

    padding: 1.5vw;
    margin: 1vw;

    border-radius: 1vw;
    font-family: Jersey;
    font-size: 1.7vw;
}

.createButton:hover {
    cursor: pointer;
    background-color: rgb(111, 187, 232);
    box-shadow: 0 0.7vw rgba(0, 162, 255, 1), 0 17px 50px 0 rgb(111, 187, 232);
}

.createButton:active {
    color: white;
    transform: translate(0, 0.7vw);
    background-color: rgb(0, 0, 0);
    box-shadow: 0 0px rgba(0, 162, 255, 1), 0 17px 50px 0 rgb(111, 187, 232);
}

h1, h2 {
    color: transparent;
    background: linear-gradient(to right, #0583d1, #74a8c8);
    background-clip: text;

    width: 100%;
    margin: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    
    text-align: center;
    font-family: Jersey;
    font-size: 10vw;
}

h2 {
    font-size: 4vw;
}

#descriptionBox {
    display: block;
    justify-content: center;

    margin: auto;
    width: 70%;
    padding: 5%;
    padding-top: 0.5%;

    text-align: center;
    font-family: Jersey;
    font-size: 1.6vw;
    border-radius: 0.7vw;
    background-color: rgb(111, 187, 232);
    box-shadow: 0.3vw 0.5vw rgba(0, 162, 255, 0.462);
}

h3 {
    font-size: 4vw;
}

a {
    transition-duration: 0.5s;
    color: white;
    text-decoration: none;
}

a:hover {
    color: yellow;
    font-size: 2vw;
}