/* Compact layout for using smartphones and other devices with small screens */
@import url("./animate.css");
@import url("./classes.css");

body {
    background: url("https://wallpapercave.com/wp/wp2568631.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#wrapper {
    position: fixed;
    background-color: rgba(255,255,255,0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: slideIn 2s;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: auto;
}

#title {
    position: sticky;
    top: 5px;
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    border: 2px solid green;
    border-radius: 25px;
    background-color: rgba(144, 214, 255, 0.5);
    overflow: hidden;
    z-index: 150;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

#content {
    position: relative;
    margin: 10px;
    padding: 5px;
    min-height: 1200px;
}

#copyright {
    position: sticky;
    left: 0px;
    bottom: 5px;
    padding: 2px;
    background: linear-gradient(45deg, lightgray, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid green;
    border-radius: 15px 15px;
    margin: 5px;
}

/* Make "methodC" appear not too large */

#methodC {
    width: 150px;
}