/*	CSS for my basic mobile website for myself
- lines 09-12




*/

html {scroll-behavior: smooth;}
* {text-shadow: 2vw 2vw 3vw black; color: beige; font-family: cursive;} /* applies all texts */
.main-title{font-size: 6vw; animation: color_ani 7s infinite; font-family: Arial; position:fixed;}
h1-h1 {font-size:5vw; animation: color_ani 5s; font-weight:bolder; margin: auto; }


body {	background-color: #003355; background-size: contain; color: azure;
	background-image: url(vllo??.gif); background-attachment: fixed; background-repeat: no-repeat; background-position:top; background-size: cover;}



img {box-shadow: 4px 4px 5px black;}

#fontani{animation: color_ani 5s infinite}
	#fontani:hover {border: blue solid 1px; background-color: blueviolet;}

		@keyframes op_ani{0%{opacity: 0%;}50%{opacity: 0%;}100%(opacity: 100%);}
		@keyframes color_ani{
			0%{color:aqua;}20%{color: aquamarine;}40%{color: yellow;}
			60%{color: pink;}80%{color: mediumpurple;}100%{color: aqua;}	;}

/*.comsavings {background-color: azure;} */
@media only screen and (orientation: portrait){
    main-sites img {width: 20%; height: auto;}
    main-sites summary {font-size: 5vw; font-weight: 800;}
    main-sites summary:hover {background-color: aqua; opacity: .15;}
    a { color: lightblue; font-weight: 800; text-decoration: none; font-family:fantasy;
		animation: linkani;}
	a:hover {background-color: aliceblue;}
}
@media only screen and (orientation: landscape){
    a   {text-decoration: none;} a:hover {text-decoration: underline;}
    main-sites img {width: 10%; height: auto;}
    main-sites summary {font-size: 2rem; font-weight: 800;}
    main-sites summary:hover {text-decoration: underline;}    }
main-sites {position: relative;}
.comsavings {position: absolute; z-index: 1; display: block; left: 32%; width: 30%; outline: black solid 4px; background-color: #004455; font-size: 1.5rem; padding: 2rem;}
summary::-webkit-details-marker {display: none;}
bible-verses-section a {font-family: sans-serif; font-size: 24;}
biblegateway a {color: #ff9999;}