*{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    /* font-weight: <weight>; */
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    }

    html, body{
                background: rgb(139, 181, 195);
    }

    .main{
        display: flex;
        flex-direction: column;
        align-items: center;

        background: rgb(139, 181, 195);

        padding-top:25px;
        padding-bottom:25px;
    }
    .inner{
        border-radius: 10px;

        padding:20px;

        background: white;
        display: flex;
        flex-direction: column;

        width: calc(100vw - 90px);
        max-width: 600px;

        box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
    }

    .bold{
        font-weight: bold;
    }
    .chunk{
        padding: 20px;
    }
    .italic{
        font-style: italic;
        color: #666;
    }
    .instruction{ 
        /* color: darkred; */
        font-weight: bold;
    }

    .logo{
        width:100px;
        align-self: center;
    }

    .code{
        margin-top:5px;
        margin-bottom: 5px;
        border-radius: 5px;

        padding:10px;

        background: rgb(252, 246, 190);
        outline: solid 2px rgb(52, 49, 21);
        font-family: monospace;

        /* height: auto; */
        field-sizing: content; 
        width: calc(100% - 70px);
        margin-left:25px;
    }

    h1{
        /* background: red; */
        text-align: center;
        margin-bottom: 20px;
    }
    h2{
        padding: 5px;
        padding-left:15px;
        background: rgb(233, 233, 233);
        margin-top:50px;
    }
    h3{
        margin-top:20px;
        margin-bottom: 5px;
    }
    p{
        padding:5px;
    }

    input{
        margin-top:5px;
        border-radius: 10px;
        padding: 5px;

        width: 50%;
        min-width: 100px;
    }
    button{
        /* justify-self: center; */
        border-radius: 15px;
 

        margin-top: 5px;
        font-size: 16px;

        padding: 5px 20px;

        background-color: rgb(170, 244, 172);
        border: solid 3px rgb(69, 99, 69);

                font-weight: bold;

                font-family: monospace;

    }
    button:hover{
        background-color: rgb(222, 255, 223);
        border-color: rgb(117, 172, 117);
        color: rgb(69, 99, 69);
    }
    button:active{
        background-color: rgb(212, 244, 165);
        border-color: rgb(117, 172, 117);

    }

    .cancel{
        background-color: rgb(244, 170, 170);
    }
    .cancel:hover{
            background-color: rgb(255, 237, 237);
    }
    .cancel:active{
            background-color: rgb(255, 198, 198);
    }

    .centre{
        align-self: center;

        display: flex;
        justify-content: center;
        align-items: center;
    }