body {
   
   
}
#arrow {
    color: white !important;
    vertical-align: bottom;
    margin-bottom: -6px;
    font-weight:bold;


}

#start {
    position: fixed;
    bottom: 20px;
    right: 100px;
   font-size: 25px;
    padding: 15px;
    padding-bottom: 20px;
}
.material-symbols-outlined {
    color: #004d6b;
    font-size: 50px !important;
}
main {
   width: 100% !important;
}
#explain {
    margin-left: 10%;
    line-height: 1.7;
    width: 80%;
    color: white;
    position: relative;
}
#Title {
    font-size: 70px;
    color: #0092ca;
}
h1 {
    color: #0092ca ;
}
#journal {
    padding: 25px;
    background-color: rgba(41, 161, 156, 0.9);
    box-shadow: 1px 1px 5px #cfcfcf;
    border-radius: 30px;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 200px;
    width: 150px;
}
h2 {
    color: #004d6b;
}
#details {
    line-height: 1.7;
    padding: 20px;
    background-color: rgba(41, 161, 156, 0.7);
    box-shadow: 1px 1px 5px #cfcfcf;
    border-radius: 30px;
}
#journal:hover {
    box-shadow: 1px 1px 10px #cfcfcf;
}
    #details:hover {
        box-shadow: 1px 1px 10px #cfcfcf;
       
    }
@media (min-width: 576px) {
    /* Phones*/
    #Title {
        font-size: 80px;
    }
    #explain {
        width: 90%;
       
    }
    #journal {
        right: 50px;
        top: 40px;
        height: 300px;
        width: 225px;
    }
}

@media (min-width: 768px) {
    /* tablets*/
    #Title {
        font-size: 90px;
    }
    #details {
        width: 80% !important;
    }
    #explain {
        margin-left: 0%;
        width: 60%;
    }
    #journal {
        right: 50px;
        top: 440px;
        height: 300px;
        width: 225px;
        position: absolute;
    }
}
    @media (min-width: 1200px) {
        /* Laptops*/
        #Title {
            margin-left: 5%;
            font-size: 100px;
        }
        #details {
            width: 50% !important;
        }
        #explain {
            margin-left: 10%;
            width: 60%;
        }
        #journal {
            right: 200px;
            top: 440px;
            height: 300px;
            width: 225px;
            position: absolute;
        }
    }

    @media (min-width: 1400px) {
        /* desktop*/
        #Title {
            margin-left: 0%;
            font-size: 120px;
        }
        #details {
            width: 40% !important;

        }
        #explain {
            margin-left: 13%;
            width: 60%;
        }
        #journal {
            right: 200px;
            top: 450px;
            height: 300px;
            width: 225px;
            position: absolute;
        }
    }