/* Project Seagull Stylesheet */

body {
    /* Background */
    background-color: #c4e2FF;

    /* Layout */
    overflow: hidden;

    /* Font */
    font-family: 'Secular One', 'Trebuchet MS', sans-serif;
}

#background-img {
    /* Positioning */
    z-index: -4;
}

.p5Canvas {
    /* Positioning */
    z-index: -3;
}

.animation {
    /* Positioning */
    z-index: -2;

    /* For Keyframing */
    /*opacity: 0.5;*/
}

#screen {
    /* Positioning */
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;

    /* Background */
    background-color: red;
    opacity: 0.0;
}

#eye-img {
    /* Starting opacity */
    opacity: 0.0;
}

#title {
    /* Positioning */
    position: absolute;
    margin: 0px;
    top: 2%;
    left: 2%;

    /* Text */
    color: skyblue;
    font-size: 4vw;
}

#title.red {
    color: #876A87;
}

#sign {
    /* Positioning */
    transform: rotate(-0.28rad);
    padding-top: 3%;

    /* Text */
    color: #594834;
    text-align: center;

    /* Background */
    /*background-color: dimgray;
    opacity: 0.5;*/

    /* Cursor */
    cursor: pointer;
}

#sign:hover {
    /* Text */
    color: #6D5C48;
}

#link-list {
    /* Positioning */
    position: absolute;
    bottom: 1%;
    left: 1%;
    margin: 0px;
    padding: 0px;

    /* List stuff */
    list-style-type: none;
}

#link-list li * {
    /* Positioning */
    float: left;
}

#link-list li p {
    /* Positioning */
    margin-top: 0.3vw;

    /* Text */
    color: dimgray;
    font-size: 1vw;
}

#link-list li img {
    /* Positioning */
    width:  2vw;
    height:  auto;
}

#popup-div {
    /* Positioning */
    position: absolute;
    width: 90%;
    height:  90%;
    margin-left: 4vw;
    margin-top: 4vh;

    /* Background */
    background-color: white;
    opacity: 0.8;

    /* Border */
    border: 0px solid;
    border-radius: 1vw;
}

#popup-div img {
    /* Cursor */
    cursor: pointer;
}

#popup-div img:hover {
    opacity: 0.5;
}

#left-cycler {
    /* Positioning */
    position: absolute;
    width: 2vw;
    height: auto;
    left: 4vw;
    top: 40vh;

    /* Color */
    opacity: 1.0;
}

#right-cycler {
    /* Positioning */
    position: absolute;
    width: 2vw;
    height: auto;
    right: 4vw;
    top: 40vh;

    /* Color */
    opacity: 1.0;
}

#exit-button {
    /* Positioning */
    position: absolute;
    padding: 0px;
    margin: 0px;
    right: 1vw;
    top: 1vh;

    /* Text */
    color: dimgray;
    font-size: 2vw;
    opacity: 1.0;
}

#exit-button:hover {
    cursor: pointer;
    opacity: 0.5;
}

#info-div {
    /* Positioning */
    width: 80%;
    margin: auto;

    /* Text */
    text-align: center;
    color: black;
}

#info-div h2 {
    font-size: 4vw;
}

#info-div p {
    font-size: 1.8vw;
}