* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 16px;
    background-image:url(../pildid/KasulikBackground.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
h1{
    font-family:'Comic Sans MS';
    font-size:clamp(30px, 7vw, 46px);
    color:blue;
    text-align:center;
}
.A1{
    font-family:'Times New Roman';
    font-size:18px;
    color:black;        
}
.A1 a:link{
    color:black;
}
.A1 a:visited{
    color:black;
}

.A2{
    font-family:'Comic Sans MS';
    font-size:clamp(22px, 5vw, 36px);
}
.A2 a:link{
    color:#8baa3c;
}
.A2 a:visited{
    color:#8baa3c;
}
.A3{
    font-size:22px;   
    color:white; 
    background-color: rgba(0, 0, 0, 0.5);
}
.A4 {
    font-size:22px;  
    color:beige;     
    background-color: rgba(0, 0, 0, 0.5);
}

ul {
	list-style-position: inside;
}

body > .A3 {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.A3 table {
    width: 100%;
    border-spacing: 6px 10px;
}

.A3 td {
    vertical-align: top;
}

@media (max-width: 600px) {
    body {
        padding: 12px;
        background-attachment: scroll;
    }

    body > .A3 {
        width: 100% !important;
        margin: 14px 0 !important;
        font-size: 16px;
    }

    .A3 table {
        font-size: 14px;
    }
}